<template>
  <div class="detail-mask" :class="{'detail-mask-active': temp}">
    <transition name="move">
      <div class="mask-content" v-show="temp">
        <div class="brief">
          <div class="brief-img">
            <img :src="info.logo" alt="">
          </div>
          <div class="brief-right">
            <div class="detail-title">{{info.titile}}</div>
            <div class="brief-price">
              <span class="brief-price-hy">￥{{ price }}</span>
              <!-- <span class="brief-price-dz">￥689</span> -->
            </div>
          </div>
          <div class="close" @click="closeBtn">
            <img src="@/assets/images/copy.png" alt="">
          </div>
        </div>
        <div class="com-box" v-for="(item,key,i) in specsList" :key="i">
          <div class="com-txt">{{key}}</div>
          <div class="com-list-wrapper">
            <div class="com-list" 
                :class="isClass(key,btnList)"
                @click="chooseClass(key,btnList)" 
                v-for="(btnList,index) in item" 
                :key="index" >
              {{btnList}}
            </div>
          </div>
        </div>
        <div class="handle-num-wrapper">
          <div class="handle-num-txt">购买数量</div>
          <div class="handle-num">
            <div class="handle-num-box handle-num-sub" @click="subNum">-</div>
            <div class="handle-num-box handle-txt">{{shopping.handleNum}}</div>
            <div class="handle-num-box handle-num-add" @click="addNum">+</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import bus from "../../../assets/js/eventBus";
export default {
  props: {
    temp: {
      type: Boolean,
      default: false
    },
    info: {},
    specsList: {}
  },
  data() {
    return {
      obj: {},
      price: 0,
      shopping: {
        gid: 1,
        handleNum: 1
      }
    };
  },
  methods: {
    // 增加商品
    subNum() {
      if (this.shopping.handleNum > 1) {
        this.shopping.handleNum--;
      } else {
        this.shopping.handleNum = 1;
      }
    },
    addNum() {
      this.shopping.handleNum++;
    },
    closeBtn() {
      this.$emit("closeMask");
    },
    // 比较对象
    equals(x, y) {
      var in1 = x instanceof Object;
      var in2 = y instanceof Object;
      if (!in1 || !in2) {
        return x === y;
      }
      if (Object.keys(x).length !== Object.keys(y).length) {
        return false;
      }
      for (var p in x) {
        var a = x[p] instanceof Object;
        var b = y[p] instanceof Object;
        if (a && b) {
          return equals(x[p], y[p]);
        } else if (x[p] !== y[p]) {
          return false;
        }
      }

      return true;
    },
    guige() {
      this.$emit("guige", this.shopping);
    },
    // 选择规格
    chooseClass(key, value) {
      this.$set(this.obj, key, value);
      // 存入规格
      // this.$set(this.shopping.guige, key, value);
      // this.shopping.guige = this.obj;
      for (let i = 0; i < this.info.detail.length; i++) {
        let specs = JSON.parse(this.info.detail[i].specs);
        if (this.equals(specs, this.obj)) {
          this.price = this.info.detail[i].price;

          // 存入ID

          this.shopping.gid = this.info.detail[i].id;
        }
      }
      this.guige();
      this.sendMsg();
    },
    // 选中样式
    isClass(key, value) {
      if (this.obj[key] == value) {
        return "com-list-active";
      } else {
        return "";
      }
    },

    // 传同级组件 显示的价格
    sendMsg() {
      bus.$emit("getPrice", this.price);
      bus.$emit("getGuige", this.obj);
    }
  },
  watch: {
    info(v) {
      this.obj = JSON.parse(v.detail[0].specs);
      this.price = JSON.parse(v.detail[0].price);
      this.shopping.gid = JSON.parse(v.detail[0].id);
    }
  },
  mounted() {
    this.sendMsg();
    this.guige();
  }
};
</script>

<style lang="scss">
.detail-mask {
  position: fixed;
  height: 100%;
  bottom: 120px;
  width: 1080px;
  z-index: 999;
  overflow: hidden;
  visibility: hidden;
  .mask-content {
    position: absolute;
    bottom: 1px;
    border-radius: 20px 20px 0 0;
    width: 1080px;
    // height: 1100px;
    background: #fff;
    padding: 48px;
    box-sizing: border-box;
    .brief {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid #e5e2e2;
      padding-bottom: 24px;
      .brief-img {
        float: left;
        img {
          width: 280px;
          height: 280px;
        }
      }
      .brief-right {
        float: left;
        margin-left: 60px;
        .detail-title {
          margin-top: 122px;
          font-weight: 500;
          font-size: 32px;
          color: #333;
        }
        .brief-price {
          margin-top: 23px;
          span {
            font-size: 36px;
            font-weight: 500;
          }
          .brief-price-hy {
            color: #d0021b;
          }
          .brief-price-dz {
            color: #9b9b9b;
            margin-left: 28px;
            text-decoration: line-through;
          }
        }
      }
      .close {
        position: absolute;
        right: 0;

        img {
          width: 48px;
          height: 48px;
        }
      }
    }
    .com-box {
      border-bottom: 1px solid #e5e2e2;
      padding-bottom: 24px;
      .com-txt {
        margin-top: 46px;
        font-size: 32px;
        color: #333333;
      }
      .com-list-wrapper {
        overflow: hidden;
        .com-list {
          float: left;
          color: #333333;
          font-size: 28px;
          background: #f7f7f7;
          margin-top: 30px;
          margin-right: 40px;
          height: 64px;
          line-height: 64px;
          padding: 0 40px;
          border-radius: 11px;
          box-sizing: border-box;
          border: 1px solid transparent;
        }
        .com-list-active {
          border: 1px solid #5252a1;
          background: #f8f6ff;
        }
      }
    }
    .handle-num-wrapper {
      overflow: hidden;
      .handle-num-txt {
        float: left;
        font-size: 33px;
        color: #333;
        margin-top: 62px;
      }
      .handle-num {
        overflow: hidden;
        font-size: 28px;
        color: #999;
        float: right;
        margin-right: 58px;
        margin-top: 48px;
        .handle-num-box {
          float: left;
          width: 50px;
          line-height: 46px;
          height: 46px;
          text-align: center;
          align-items: center;
          justify-content: center;
          margin-left: 8px;
          box-sizing: border-box;
          background: #f5f6f8;
        }
        .handle-txt {
          color: #333333;
          font-size: 24px;
        }
      }
    }
  }
}
.detail-mask-active {
  visibility: visible;
  background: rgba(51, 51, 51, 0.2);
}
.move-enter-active,
.move-leave-active {
  transition: all 0.43s;
}
.move-enter,
.move-leave-to {
  transform: translateY(100%);
}
</style>
